<!--
 * @Descripttion: your project
 * @version: 1.0
 * @Author: hongweixun
 * @Date: 2022-07-12 14:51:16
 * @LastEditors: hongweixun
 * @LastEditTime: 2022-09-08 15:20:04
-->
<template>
  <div class="score-chart-box">
    <el-row :gutter="40" class="content-row-box">
      <el-col :span="12" class="col-after-border">
        <el-row class="chart-title-box">
          <el-col :span="12" style="font-size:1.2rem;">
            <div style="color:#fff;margin-bottom:10px;">
              初中部
            </div>
            <span style="font-size:1rem;">评分排行</span>
          </el-col>
          <el-col :span="12">
            <el-row type="flex" justify="end">
              <div id="czChart"></div>
            </el-row>
          </el-col>
        </el-row>
        <el-row style="margin-top:1.4rem;overflow: hidden;" :style="'height:' + height + 'vw;'">
          <el-col :span="24">
            <el-row
              :gutter="20"
              class="row-wrap-none"
              v-for="(item, index) in data"
              :key="index"
              :style="index != data.length - 1 ? 'margin-bottom:1rem;' : ''"
            >
              <el-col :span="5">
                <div class="pm-flex-box">
                  <div class="font-flex-box">NO.{{ index + 1 }}</div>
                  <svg-icon
                    :icon-class="index < 3 ? 'pm_red' : 'pm_bule'"
                    className="pm_red-arrow"
                  ></svg-icon>
                </div>
              </el-col>
              <el-col :span="19">
                <el-row>
                  <el-col
                    :span="18"
                    style="color:#01C7FF;width:70%;white-space: nowrap;overflow: hidden;"
                    >{{ item.name }}</el-col
                  >
                  <el-col :span="6">
                    <el-row type="flex" justify="end" style="color:#F76261;"
                      >{{ item.score }}分</el-row
                    >
                  </el-col>
                </el-row>
                <el-row>
                  <div :id="'process' + (index + 1)"></div>
                </el-row>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="12">
        <el-row class="chart-title-box">
          <el-col :span="12" style="font-size:1.2rem;">
            <div style="color:#fff;margin-bottom:10px;">
              高中部
            </div>
            <span style="font-size:1rem;">评分排行</span>
          </el-col>
          <el-col :span="12">
            <el-row type="flex" justify="end"> <div id="gzChart"></div> </el-row
          ></el-col>
        </el-row>
        <el-row style="margin-top:1.4rem;overflow: hidden;" :style="'height:' + height + 'vw;'">
          <el-col :span="24">
            <el-row
              :gutter="60"
              class="row-wrap-none"
              v-for="(item, index) in data2"
              :key="index"
              :style="index != data.length - 1 ? 'margin-bottom:1rem;' : ''"
            >
              <el-col :span="5">
                <div class="pm-flex-box">
                  <div class="font-flex-box">NO.{{ index + 1 }}</div>
                  <svg-icon
                    :icon-class="index < 3 ? 'pm_red' : 'pm_bule'"
                    className="pm_red-arrow"
                  ></svg-icon>
                </div>
              </el-col>
              <el-col :span="19" style="padding: 0 20px!important;">
                <el-row>
                  <el-col
                    :span="18"
                    style="color:#01C7FF;width:70%;white-space: nowrap;overflow: hidden;"
                    >{{ item.name }}</el-col
                  >
                  <el-col :span="6">
                    <el-row type="flex" justify="end" style="color:#F76261;"
                      >{{ item.score }}分</el-row
                    >
                  </el-col>
                </el-row>
                <el-row :span="24">
                  <div :id="'processGz' + (index + 1)"></div>
                </el-row>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import { RingProgress, Progress } from '@antv/g2plot'
export default {
  data () {
    return {
      height: document.body.clientHeight * 0.56 * 0.50 + 5,
      data: [
        { name: '初中部-2020级(12)班', score: '8' },
        { name: '初中部-2020级(2)班', score: '7' },
        { name: '初中部-2020级(1)班', score: '5.5' },
        { name: '初中部-2020级(11)班', score: '3' },
        { name: '初中部-2020级(8)班', score: '2' },
        { name: '初中部-2020级(7)班', score: '1' }
      ],
      data2: [
        { name: '高中部-2020级(12)班', score: '6' },
        { name: '高中部-2020级(2)班', score: '6' },
        { name: '高中部-2020级(1)班', score: '5.5' },
        { name: '高中部-2020级(11)班', score: '3' },
        { name: '高中部-2020级(8)班', score: '2' },
        { name: '高中部-2020级(7)班', score: '2' }
      ]
    }
  },
  methods: {
    init (percent, score) {
      const ringProgress = new RingProgress('czChart', {
        height: 50,
        width: 50,
        autoFit: false,
        percent: percent,
        color: ['l(90) 0:#0E61FE 1:#FF5B5A', '#1e2065'],
        statistic: {
          content: {
            style: {
              fontSize: 17,
              fill: '#fff'
            },
            formatter: item => {
              return `${score}分`
            }
          }
        }
      })

      ringProgress.render()
    },
    init2 (percent, score) {
      const ringProgress = new RingProgress('gzChart', {
        height: 50,
        width: 50,
        autoFit: false,
        percent: Math.abs(percent),
        color: ['l(90) 0:#0E61FE 1:#FF5B5A', '#1e2065'],
        statistic: {
          content: {
            style: {
              fontSize: 17,
              fill: '#fff'
            },
            formatter: item => {
              return `${score}分`
            }
          }
        },
        progressStyle: {
          radius: [15, 15, 0, 0]
        }
      })

      ringProgress.render()
    },
    getProcess (id, percent) {
      const progress = new Progress(id, {
        height: 30,
        autoFit: true,
        percent: percent,
        color: ['l(0) 0:#0E61FE 1:#FF5B5A', '#00073f'],
        columnStyle: {
          radius: [20, 20, 0, 0]
        },
        progressStyle: {
          lineOpacity: 0.5,
          stroke: '#0a5da591',
          lineWidth: 1,
          cursor: 'pointer'
        }
      })

      progress.render()
    },
    getProcess2 (id, percent) {
      const progress = new Progress(id, {
        height: 30,
        autoFit: true,
        percent: percent,
        color: ['l(0) 0:#0E61FE 1:#FF5B5A', '#00073f'],
        progressStyle: {
          lineOpacity: 0.5,
          stroke: '#0a5da591',
          lineWidth: 1,
          cursor: 'pointer'
        }
      })

      progress.render()
    }
  },
  created () {},
  computed: {
    ...mapState(['floorList'])
  },
  mounted () {
    this.$nextTick(() => {
      setTimeout(() => {
        if (this.floorList) {
          this.floorList.forEach((item, index) => {
            // const id = 'process' + (index + 1)
            // const percent = parseFloat((Number(item.score) / 100).toFixed(1))
            if (index === 0) {
              // this.getProcess(id, percent)
              const percent = parseFloat((Number(item.total) / 100).toFixed(1))
              this.init(percent, item.total)
              this.data = item.classes
              this.data.forEach((item, i) => {
                const id = 'process' + (i + 1)
                const percent = parseFloat(
                  (Number(item.score) / 100).toFixed(1)
                )
                this.getProcess(id, percent)
              })
            } else {
              // this.getProcess(id, percent)
              const percent = parseFloat((Number(item.total) / 100).toFixed(2))
              this.init2(percent, item.total)
              this.data2 = item.classes
              this.data2.forEach((item, index) => {
                const id = 'processGz' + (index + 1)
                const percent = parseFloat((Number(item.score) / 10).toFixed(2))
                this.getProcess2(id, percent)
              })
            }
          })
        }
      }, 500)
      // this.init()
    })
    // this.$nextTick(() => {
    //   this.init()
    //   this.init2()
    //   // 初中
    //   this.data.forEach((item, index) => {
    //     const id = 'process' + (index + 1)
    //     const percent = parseFloat((Number(item.score) / 100).toFixed(1))
    //     this.getProcess(id, percent)
    //   })
    //   // 高中
    //   this.data2.forEach((item, index) => {
    //     const id = 'processGz' + (index + 1)
    //     const percent = parseFloat((Number(item.score) / 10).toFixed(1))
    //     this.getProcess2(id, percent)
    //   })
    // })
  }
}
</script>
<style lang="less" scoped>
.row-wrap-none {
  display: flex;
  flex-direction: row;
}
.col-after-border {
  border-right: 1px solid #06388288;
}
.chart-title-box {
  border: 1px solid #0f1288;
  background: rgba(15, 17, 136, 0.2);
  opacity: 1;
  border-radius: 4px;
  box-shadow: 2px 2px 15px #0647eb5b inset;
  padding: 10px;
  display: flex;
  align-items: center;
}
.pm-flex-box {
  position: relative;
  height: 3.125rem;
  width: 3.125rem;
  display: flex;
  justify-content: center;
  align-items: center;
  .pm_red-arrow {
    font-size: 3.125rem;
    position: absolute;
    left: 0;
  }
  .font-flex-box {
    position: absolute;
    z-index: 9;
    color: #fff;
    font-size: 0.75rem;
  }
}
.content-row-box {
  color: #7ba0d5;
  font-size: 0.875rem;
  padding-bottom: 5px;
}
.score-chart-box {
  padding: 10px 20px;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
</style>
